<template>
	<div class="info-container info-table">
		<div>
			<div @click="button" v-for="(item,index) of t.button" :class="{'info-active':!index}" class="info-toggleshow">{{item}}</div>
		</div>
		<div class="jcyui-show info-box" :class="type">
			<div class="info-liteBox">
				<div class="info-liteTitle">
					专业简介
				</div>
				<div>
					<div class="info-tip">
					</div>
					<div class="info-introduce">
						<div>{{d.intro.major_name}}概况</div>
						<div class="info-ointro">&nbsp;&nbsp;{{d.intro.intro}}</div>
					</div>
					<div @click="seeMore" class="info-seeall">查看全部</div>
				</div>
			</div>
			<div class="info-liteBox">
				<div class="info-liteTitle">
					学校男女生比例
				</div>
				<div class="info-intro bd row info-nannv">
					<ul class="col-sm-4">
						<li class="info-famale">
							<info-icon3></info-icon3>
						</li>
						<li class="info-nvsheng">女生</li>
					</ul>
					<ul class="col-sm-4">
						<div class="info-nannvspan">
							<span class="info-nv">{{100-d.intro.boy}}</span> :
							<span class="info-nan">{{d.intro.boy}}</span>
						</div>
						<div class="fl">
							<div :style="{width:(100-d.intro.boy)+'%'}"></div>
							<div :style="{width:d.intro.boy+'%'}"></div>
						</div>
					</ul>
					<ul class="col-sm-4">
						<li class="info-male">
							<info-icon4></info-icon4>
						</li>
						<li class="info-nansheng">男生</li>
					</ul>
				</div>
			</div>
			<div class="info-liteBox">
				<div class="info-liteTitle">
					相似专业
				</div>
				<div class="info-intro bd row info-xiangguan">
					<div v-for="item of d.intro.related" @click="toMajor(item.id)">{{item.major_name}}</div>
				</div>
			</div>
		</div>
		<div class="jcyui-hide info-jiuye info-box">
			<div class="info-liteBox">
				<div class="info-liteTitle">就业前景概况</div>
				<div class="row">
					<div class="info-liteBox-box col-lg-3">
						<info-icon0></info-icon0>
						<div>
							<info-icon1></info-icon1>
						</div>
						<div>NO.{{d.job.prospect.salary}}</div>
						<div>薪酬排名</div>
					</div>
					<div class="info-liteBox-box col-lg-3">
						<info-icon0></info-icon0>
						<div>
							<info-icon2></info-icon2>
						</div>
						<div>￥{{d.job.prospect.five}}</div>
						<div>毕业半年薪资</div>
					</div>
					<div class="info-liteBox-box col-lg-3">
						<info-icon0></info-icon0>
						<div class="cirpro">
						</div>
						<div>{{d.job.prospect.trade_name}}</div>
						<div>最多去向行业</div>
					</div>
					<div class="info-liteBox-box col-lg-3">
						<info-icon0></info-icon0>
						<div class="cirpro2"></div>
						<div>{{d.job.prospect.area_name}}</div>
						<div>最多去向城市</div>
					</div>
				</div>
			</div>
			<div class="info-liteBox">
				<div class="info-liteTitle">
					毕业生行业分布
				</div>
				<div class="info-hyfb">

				</div>
			</div>
			<div class="info-liteBox">
				<div class="info-liteTitle">
					毕业生岗位去向
				</div>
				<div class="info-gwqx">

				</div>
			</div>
			<div class="info-liteBox ">
				<div class="info-liteTitle">毕业生流向城市分布</div>
				<div class="info-to-city">
					<ul class="col-lg-6">
						<li>63%</li>
						<li>留在学校所在地区(北京市)</li>
					</ul>
					<ul class="col-lg-6">
						<li>84%</li>
						<li>去北上广深</li>
					</ul>
					<div class="info-pro">
						<div v-for="item of d.flex" :style="{flex:item}"></div>
					</div>
					<div class="info-pro-text">
						<!--<div v-for="(item,index) of d.flex" :style="{flex:item}">{{d.name[index]}}</div>-->
					</div>
				</div>
			</div>
		</div>
		<div class="jcyui-hide info-box info-jiuye">
			<div class="info-liteBox">
				<div class="info-liteTitle">开设此专业的所有学校</div>
				<div class="row" id="recommond">
					<info-schoollist :d=d :t=t></info-schoollist>
				</div>
				<div @click="toBefore" class="info-button info-before">上一页</div>
				<div @click="toAfter" class="info-button info-after">下一页</div>
			</div>
		</div>
	</div>
</template>
<script>
	module['info-major-container'] = { //主内容盒子
	props: ['d', 'type'],
	components: {
		'info-schoollist': require('info-schoollist', {
			init: init,
			ajaxMajor: ajaxMajor,
			attentionAjax: attentionAjax
		})
	},
	data: function data() {
		var nodata = '你看到的是假的';
		return {
			t: {
				button: ['专业简介', '就业报告', '开设学校'],
				nodata: nodata,
				index: 1
			}
		};
	},
	template: template,
	methods: {
		button: function button(e) {
			$(e.target).addClass('info-active').siblings('.info-toggleshow').removeClass('info-active');
		},
		seeMore: function seeMore(e) {
			if ($(e.target).html() === '收起') {
				$('.info-introduce').css('height', '245px');
				$(e.target).html('查看更多');
			} else {
				$('.info-introduce').css('height', 'auto');
				$(e.target).html('收起');
			}
		},
		toMajor: function toMajor(id) {
			//点击相关专业中的灰色按钮
			ajaxMajor.call(init.vm, 'major', id);
		},
		toBefore: function toBefore() {
			if (cache.page == 1) {
				jcy.useJs('jcyer', function () {
					jcy.jcyer({
						skin: 1,
						content: '上一页在哪里'
					});
				});
				return;
			}
			cache.page--;
			if (!cache.activeArea) {
				ajaxMajor.school(!1, cache.page);
			} else {
				ajaxMajor.school(cache.activeArea, cache.page);
			}
		},
		toAfter: function toAfter() {
			if (init.vm.d.schools.length < 10) {
				jcy.useJs('jcyer', function () {
					jcy.jcyer({
						skin: 1,
						content: '哈哈，你点过头了'
					});
				});
				return;
			}
			cache.page++;
			if (!cache.activeArea) {
				ajaxMajor.school(!1, cache.page, 1);
			} else {
				ajaxMajor.school(cache.activeArea, cache.page, 1);
			}
		}
	}
};
</script>